/*
 * @Description: 修改element组件样式，切换到其他页面修改scss变量改变组件样式风格
    通过路由meta.style来设置页面风格
 * @Author: liushuang
 * @Date: 2022-04-25 10:35:51
 * @LastEditTime: 2022-04-25 16:23:19
 */
import { watch } from 'vue'
import { useRoute } from 'vue-router'

/**
 * @desc: 修改scss变量
 * @param {*} scssVar 变量
 * @param {*} value 样式值
 */
export function editScssVar(scssVar, value) {
  document.getElementsByTagName('body')[0].style.setProperty(scssVar, value)
}

/**
 * @desc: 删除body上所有前缀为style的class
 */
export function removeBodyStyleClass() {
  const { classList } = document.body
  classList.forEach((item) => {
    if (item.indexOf('style_') > -1) classList.remove(item)
  })
}

/**
 * @desc: 监听路由meta，修改页面样式风格
 */
export function changeStyle() {
  const route = useRoute()
  watch(
    () => route.meta,
    (meta) => {
      // 上个页面0.1秒后隐藏 下个页面0.2s后出现 卡着中间空白时间来修改样式
      setTimeout(() => {
        removeBodyStyleClass()
        if (meta.style) {
          document.body.classList.add(`style_${meta.style}`)
        }
      }, 100)
    }
  )
}
